<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
    <title>full-screen</title>
    <!--<script src="/templates/index.js" charset="utf-8"></script>-->
  <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <style>
        /*    #dd{*/
        /*    position: absolute;*/
        /*    left:50px;*/

		/*		top:100px;*/
        /*}*/
        #myCanvas,#top,#bg{
             position: absolute;
            left:0;
				top:0;
        }
    	body{
    		height:1000px;
    	}
        *{
            margin:0px;
            padding:0px;
            cursor:crosshair;
        }
		.tools{
			position:absolute;
            left:900px;
            height:690px;
            border-radius: 10px;
            padding:30px 50px;
            background-color:#1aa67d;
            cursor:default;
		}

        #dd{
            width:1000px;
            height: 1000px;
            margin: 0 auto;
			float:left;
        }
        #myCanvas{
				position: absolute;
				z-index: 112;
				left:0;
				top:0;
				cursor:crosshair;


        }
		 #bg{
				position: absolute;
				z-index: 11;
				left:0;
				top:0;
				background: #e3fefd;
				cursor:crosshair;
                width:900px;

        }
		img {
	        width: 100%;
        }
        #bg_color{

            background-color: #e0f4e0;
            z-index:10;
        }
		input,button{
			padding:12px;
			font-size:18px;
			margin:30px;
			cursor:pointer;
			clear:both;
			background-color:#0b2e13;
            border: 2px solid white;
            opacity: 0.75;
            color: #fff;
			border-radius: 5px;
            width:160px;
            transition: all 0.3s;
		}
        input:hover
{
	box-shadow: 5px 5px 5px black;
}
              button:hover
{
	box-shadow: 5px 5px 5px black;
}
    button{
        width:186px;
    }

    #dd,#bg_color{
        width:900px;
        height:750px;
    }
    </style>
</head>
<body id= "body">

	<div>
    <div id="dd">
        <canvas id="myCanvas" width=900px height=750px>
            您的浏览器不支持canvas标签。
        </canvas>
        <img id = "bg" ></img>
        <div id = "bg_color">

        </div>
    </div>
	
	
	<div class = "tools">
        <form id = "upload">
	<input type="file" name = "file" id="file" value = "选择文件" accept="image/png, image/jpeg">
            </form>

	<button id="eraseAllButton">一键清除</button><br/>
	<button id="end">框选完成</button><br/>
	</div>

	</div>


    <script>


        /**
 * Created by bigding on 2016/7/4.
 */

        var cont = 0;//监控是否选择了图片
        var cont2 = 0;//监控是否已经框选完成
var begin = false,posi_num = 0;
var posi = new Array();                             //定义位置数组
var imgUrl;         //图片信息
//var inpath="D:\\1.jpg"      测试用的


/*for(var i = 0; i<100 ; i++){
    posi[i] = new Array(0,0);
    //console.log(i);
}*/
window.onload= function () {
    var screen = document.getElementById("myCanvas");           //获取元素
    var bg = document.getElementById("bg");

    var ctx,mouseX,mouseY;
	var sW,sH;
	sW = screen.offsetWidth;
	sH = screen.offsetHeight;

	var imgW,imgH;



	if(screen.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        ctx = screen.getContext("2d");

	}

	ctx.fillStyle= 'rgba(255, 255, 255, 0)';





    screen.onclick = function (event) {
        mouseX=getMousePos(1,event);                        //获取当前鼠标点击的横纵位置
        mouseY=getMousePos(2,event);
        //console.log("X:"+mouseX+"\tY:"+mouseY+"\tnum:"+posi_num);

        var t_arr = [0,0]
                 posi.push(t_arr);

        posi[posi_num][0] = mouseX;//将点击的位置存入数组中
                posi[posi_num][1] = mouseY;



        if (posi_num>1 && Math.abs(mouseX-posi[0][0])<20 && Math.abs(mouseY-posi[0][1])<20)//
        {

             posi[posi_num][0] = posi[0][0];//将点击的位置存入数组中
            posi[posi_num][1] = posi[0][1];

 			ctx.lineTo(posi[posi_num-1][0], posi[posi_num-1][1]);
 			//最后一笔自动补全
            ctx.lineTo(posi[0][0], posi[0][1]);

            ctx.lineWidth = 5;


            //补全后填充选择的地块
        	ctx.fillStyle="#aff2fd";
        	cont2 = 1;
            ctx.fill();
            ctx.stroke();

        }
        else{

        	 drawLine(posi_num);
        	 posi_num++;
        }

    }



    var eraseAllButton = document.getElementById("eraseAllButton");

	// eraseAllButton.onclick = function(e){
	// 	ctx.clearRect(0, 0, screen.width, screen.height);
	// 	posi = new Array();
	// 	ctx.beginPath();
	// 	};
    //放弃的使用canvas作为背景板的方案
/*

	document.getElementById("open_file").onchange = function readFile()
	{
		var file = document.getElementById("open_file").files[0];
		var reader = new FileReader();
		reader.readAsDataURL(file);    //转化为base64的数据类型

		reader.onload = function(e){
			drawToCanvas(this.result);

		}
	}
	function drawToCanvas(imgData)
	{
		var img = new Image;
		var bg_ctx;


		//alert(imgData);
		img.src = imgData;
		imgW = img.width;
		imgH = img.height;

		if(bg.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        bg_ctx = bg.getContext("2d");


	}

		img.onload = function(){bg_ctx.drawImage(img,0,0,sW,imgH*(sW/imgW));}
		bg_ctx.stroke();
	}

*/


/*

	var eraseAllButton = document.getElementById("eraseAllButton");

	eraseAllButton.onclick = function(e){
		ctx.clearRect(0, 0, screen.width, screen.height);

		for(var i = 0; i<100 ; i++){
		posi[i] = new Array(0,0);

		}

		posi_num=0;
		/!*
		var img=new Image()
		img.src=img64
		img.onload = function(){bg_ctx.drawImage(img,0,0,sW,imgH*(sW/imgW));}
		*!/
		ctx.beginPath();

		};


//此处是将抠取的图片保存到本地。
//如果修改为上传到服务器从此处删除到onload尾部



	//图片下载操作,指定图片类型
	function download(type) {
    	//设置保存图片的类型
    	var imgdata = screen.toDataURL(type);
   		 //将mime-type改为image/octet-stream,强制让浏览器下载
    	var fixtype = function (type) {
        type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    }
    imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
    //将图片保存到本地
    var saveFile = function (data, filename) {
        var link = document.createElement('a');
        link.href = data;
        link.download = filename;
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        link.dispatchEvent(event);
    }
    var filename = new Date().toLocaleDateString() + '.' + type;
    saveFile(imgdata, filename);
}



*/



       document.getElementById("file").onchange = function readFile()
	{
          var file = document.getElementById("file");
          imgUrl = window.URL.createObjectURL(file.files[0]);
          var img = document.getElementById('bg');
          cont=1;
          img.setAttribute('src', imgUrl); // 修改img标签src属性值

           var formData = new FormData($('#upload')[0]);

            $.ajax({
            url: 'imgRestore',
             type: "post",
             contentType: false,
             processData:false,
             data:formData,
            success: function (data) {
        },
        error: function () {
            console.log("未知错误");
        },
    });

      };




}//onload结束部分


		var end =document.getElementById("end");
		end.onclick = function(){
            if(cont==1 && cont2 ==1)
            {
                post();
            }
            else if(cont==0)
            {
                alert("请先选择规划图");
            }
            else if(cont2==0)
            {
                alert("请完整框选地块");
            }
            else{
                alert("服务器错误，请联系管理员修复");
            }

		}

function getMousePos(num,event) {                       //获取位置信息
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; //屏幕滚动像素
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    if(num == 1)   return e.clientX;
    else return e.clientY;
}
function drawLine(num){
    var canvas = document.getElementById("myCanvas");           //获取元素
    var ctx;
    if(canvas.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        ctx = canvas.getContext("2d");

        //开始一个新的绘制路径
      //  ctx.beginPath();
        //设置线条颜色为黑色
        ctx.strokeStyle = "yellow";
        if(num == 0){}  //绘制直线线段起始坐标点
        //    ctx.moveTo(posi[num][0], posi[num][1]);
        else{
            //绘制直线线段到指定坐标点
            ctx.lineTo(posi[num-1][0], posi[num-1][1]);
            ctx.lineTo(posi[num][0], posi[num][1]);
            ctx.lineWidth = 5;
            ctx.stroke();
        }
        //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
        //ctx.closePath();
    }
}







  var url = "/points_redis";
//提交顶点坐标集
function post(){

  $.ajax({
        url: url,
        type: "post",
        contentType: "application/json",
     // dataType:"html",
        data:JSON.stringify(posi),
        success: function (data) {
           alert(data)
           window.location.href ="temp?pid=1";
        },
        error: function (e) {
          //返回500错误 或者其他 http状态码错误时 需要在error 回调函数中处理了 并且返回的数据还不能直接alert，需要使用
　　　　　　　　　　//$.parseJSON 进行转译    res.msg 是自己组装的错误信息通用变量
                var res = $.parseJSON(e.responseText);
                layer.msg(res.msg);
        },
    });
}

         $(document.body).css({
            "overflow-y": "hidden"
        });


    </script>


</body>
</html>